<template>
  <div class="header_top">
    <v-head />
    <!-- 面包屑导航 -->
    <template>
      <div class="bread">
        <div class="container">
          <span class="text fl"> 您的当前位置：</span>
          <el-breadcrumb class="fl" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/newslist' }">新闻中心</el-breadcrumb-item>
            <el-breadcrumb-item>{{ info.title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </template>
    <!-- 详情 -->
    <div class="show_news news_detail01 p7090">
      <div class="container">
        <div class="row content overhide pr">
          <div class="fl left c_left">
            <ul>
              <li>关于juju</li>
              <li>
                <router-link to="/aboutus" class="bl">公司简介</router-link>
              </li>
              <li class="active">
                <router-link to="/newslist" class="bl">新闻中心</router-link>
              </li>
              <li>
                <router-link to="/contact" class="bl">联系我们</router-link>
              </li>
            </ul>
          </div>
          <div class="fr right c_center">
            <div>
              <div class="name">{{ info.title }}</div>
              <div class="clearfix date row">
                <div class="col-md-8">
                  发布于：{{ info.create_time }}
                  <!--i class="iconfont icon-yanjing"></i> {{ info.views }}-->
                </div>
                <!-- <div class="col-md-4 tr">
                  <div class="ib">分享到：</div>
                  <div class="social-share ib" data-initialized="true">
                    <a href="#" class="social-share-icon icon-wechat"></a>
                    <a href="#" class="social-share-icon icon-weibo"></a>
                    <a href="#" class="social-share-icon icon-qq"></a>
                  </div>
                </div> -->
              </div>
              <div class="text" v-html="info.content"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 尾部 -->
    <v-foot />
  </div>
</template>

<script>
import vHead from "../../websitecom/Head.vue";
import vFoot from "../../websitecom/Foot.vue";
import vBread from "../../websitecom/Bread.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    vHead,
    vFoot,
    vBread,
    swiper,
    swiperSlide,
  },
  data() {
    return {
      info: [],
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  beforeCreate: function () {
    document.getElementsByTagName("body")[0].className = "active";
    document.getElementsByTagName("html")[0].className = "active";
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/news/detail?id=" + this.$route.query.id)
        .then(function (response) {
          that.info = response.data.data;
          //console.log(that.info);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
  },
};
</script>

<style lang="less" scoped>
html.active {
  overflow-y: scroll !important;
  height: auto !important;
}
.list_team ul .activity {
  margin-bottom: 2.125rem;
}
.show_news {
  .right {
    > div {
      padding: 2.1875rem 2rem;
    }

    .name {
      font-size: 1.125rem;
      line-height: 1.875rem;
      font-weight: 600;
      color: #000000;
      margin-bottom: 0.5rem;
    }

    .date {
      font-size: 0.875rem;
      line-height: 2.0625rem;
      color: #7f7f7f;

      i {
        margin-left: 1.25rem;
        font-size: 0.875rem;
      }

      .col-md-4 {
        a {
          color: #fff !important;
          font-size: 1rem !important;
          margin: 0 0.3125rem !important;
        }

        a:nth-child(1) {
          background: #7bc549 !important;
        }

        a:nth-child(2) {
          background: #ff763b !important;
        }

        a:nth-child(3) {
          background: #56b6e7 !important;
        }
      }
    }

    .text {
      padding-top: 1.5rem;
      margin-top: 1.5rem;
      border-top: 1px solid #ebebeb;
    }
  }
}
</style>
